<template>
	<view class="content">
		<!-- 留言标题 -->
		<view class="msg_title">
			{{ msgobj.message_title }}
		</view>
		<!-- 留言副标题 -->
		<view class="msg_sub_title" v-show="hiddenSubTitle(msgobj.message_sub_title)">
			{{ msgobj.message_sub_title }}
		</view>
		<!-- 留言正文 -->
		<view class="msg_content">
			{{ msgobj.message_content }}
		</view>
		<!-- 留言的时间 -->
		<view class="msg_info">
			<text>创建时间：{{ formatDate(msgobj.created_at) }}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: "msgcontent",
		data() {
			return {

			};
		},
		props: {
			msgobj: {
				type: Object,
				required: true,
				validator: (obj) => {
					// 验证必要字段是否存在
					return [
						'id',
						'message_title',
						'message_sub_title',
						'message_content',
						'created_at'
					].every(key => key in obj)
				}
			}
		},
		methods: {
			hiddenSubTitle(subtitle){
				if(subtitle == null || subtitle == ''){
					return false;
				}else{
					return true;
				}
			},
			formatDate(isoString) {
				// 简单日期格式化示例
				return new Date(isoString).toLocaleString()
			}
		}
	}
</script>

<style>
	.content {
		width: 700rpx;
		margin: 25rpx;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		border-radius: 15rpx;
		border-color: #e1e1e1;
		border-style: solid;
		border-width: 1rpx;
		background-color: aliceblue;
	}

	.msg_title {
		width: 660rpx;
		min-height: 50rpx;
		margin: 20rpx;
		text-align: center;
		font-size: 35rpx;
		font-weight: bold;
	}

	.msg_sub_title {
		width: 660rpx;
		margin: 20rpx;
		font-size: 30rpx;
		font-weight: bold;
	}

	.msg_content {
		width: 660rpx;
		margin: 20rpx;
	}

	.msg_info {
		text-align: right;
		font-size: 25rpx;
		color: darkgray;
		width: 660rpx;
		min-height: 50rpx;
		margin: 20rpx;
	}
</style>